<!--
 * @Author: your name
 * @Date: 2021-04-22 19:01:23
 * @LastEditTime: 2021-04-30 01:05:33
 * @LastEditors: Please set LastEditors
 * @Description: 可输入可选择的框
 * @FilePath: /medicine-web/src/components/CustomInputSelect/index.vue
-->
<template>
  <div class="custom-input-select">
    <el-autocomplete class="inline-input" :value-key="'id'" :value="'name'" v-model="inputValue" :fetch-suggestions="querySearch" :placeholder="placeholderStr" @select="handleSelect"></el-autocomplete>
  </div>
</template>
<script>
export default {
  name: 'customInputSelect',
  data () {
    return {}
  },
  methods: {
    querySearch(queryString, cb) {
      let temp = []
      for (const item of this.optionsSelection) {
        temp.push({ id: item, name: item })
      }
      cb(temp)
    },
    handleSelect(item) {
      console.log('item', item)
    }
  },
  computed: {
    inputValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  props: {
    optionsSelection: {
      type: Array,
      default: () => []
    },
    value: {
      type: Number,
      default: null
    },
    placeholderStr: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-input-select {
  width: 100%;
  height: 43px;
  /deep/ .el-autocomplete {
    height: 100%;
    .el-input {
      height: 100%;
      .el-input__inner {
        height: 43px;
      }
    }
  }
}
</style>